<template>
  <div class="warp">
    <div class="top">
      <span class="icon" @click="fungo()">
        <van-icon name="arrow-left" />
      </span>
      <div>
        <span class="icon icon1">
          <van-icon name="star-o" />
        </span>
        <span class="icon icon1">
          <van-icon name="share-o" />
        </span>

        <span class="icon icon1">
          <van-icon name="ellipsis" />
        </span>
      </div>
    </div>
    <div class="swipe">
      <van-swipe :loop="false" :width="145">
        <van-swipe-item>
          <img :src="objfood1.img1" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="objfood1.img2" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="objfood1.img3" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img :src="objfood1.img4" alt />
        </van-swipe-item>
      </van-swipe>
      <img src="chenkong/imgs/swipe/1/ve.gif" alt class="ve" />
    </div>
    <div class="centent">
      <div class="centent-pic">
        <p class="title">{{ obj.storeName }}</p>
        <p class="mass">
          <img class="start" src="chenkong/imgs/shopcenter/start.gif" alt />
          <img class="start" src="chenkong/imgs/shopcenter/start.gif" alt />
          <img class="start" src="chenkong/imgs/shopcenter/start.gif" alt />
          <img class="start" src="chenkong/imgs/shopcenter/start.gif" alt />
          <img class="start" src="chenkong/imgs/shopcenter/start.gif" alt />
          <span class="orgren">{{ obj.str }}</span>
          <span>402</span>条 ￥
          <span>{{ obj.storePrice }}</span>/人
        </p>
        <div class="fd">
          <div class="pjleft">
            <span>口味：</span>
            <span>4.8</span>
            <span>环境：</span>
            <span>4.9</span>
            <span>服务：</span>
            <span>4.8</span>
          </div>
          <div class="pjright">
            <span>{{ obj.gtype }}</span>
            <span>{{ obj.storeArea }}</span>
          </div>
        </div>

        <p class="pjad">
          <img class="pj" src="chenkong/imgs/shopcenter/pj.gif" alt />
          <span class="adress">美食服务榜第2名</span>
        </p>
        <p class="time">
          营业中
          <span>{{ obj.storeTime }}</span>
        </p>
        <div class="serve">
          <span>付费停车</span>
          <span>空调开放</span>
          <span>有吸烟区</span>
          <span>有手机充电</span>
        </div>
        <div class="adress">
          <div class="adressr">
            <p>信义巷与城南路东段交叉口东北角</p>
            <span class="grey">位于老菜场市井文化创意街区4号楼内</span>
          </div>
          <div class="adressl">
            <div class="carl">
              <img src="chenkong/imgs/swipe/other/car.gif" alt />
              <p class="name">打车</p>
            </div>
            <div>
              <img src="chenkong/imgs/swipe/other/ipone.gif" alt />
              <p class="name">电话</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="classify">
      <van-tabs v-model="active">
        <van-tab title="优惠">
          <div class="favourable" @click="funsetmeal()">
            <div class="content">
              <div class="lineone">
                <span class="hui">惠</span>
                <span class="qc">到店套餐</span>
              </div>
              <div class="Presentation">
                <div class="left">
                  <img :src="objfood1.img1" alt />
                  <div class="center">
                    <p>{{ objfood1.name1 }}</p>
                    <div class="time">
                      <span>周一至周五</span> |
                      <span>可自提</span> |
                      <span>免预约</span>
                    </div>
                    <div class="price">
                      <span class="orgin">￥{{ objfood1.newp1 }}</span>
                      <span class="hua">￥{{ objfood1.old1 }}</span>
                      <span class="orgin bck">7.9折</span>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="qiang">抢购</div>
                  <div class="sm">
                    半年售
                    <span>{{ objfood.gsale }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="content">
              <div class="lineone">
                <span class="hui">惠</span>
                <span class="qc">到店套餐</span>
              </div>
              <div class="Presentation">
                <div class="left">
                  <img :src="objfood1.img2" alt />
                  <div class="center">
                    <p>{{ objfood1.name2 }}</p>
                    <div class="time">
                      <span>周一至周五</span> |
                      <span>可自提</span> |
                      <span>免预约</span>
                    </div>
                    <div class="price">
                      <span class="orgin">￥{{ objfood1.newp2 }}</span>
                      <span class="hua">￥{{ objfood1.old2 }}</span>
                      <span class="orgin bck">7.9折</span>
                    </div>
                  </div>
                </div>
                <div class="right">
                  <div class="qiang">抢购</div>
                  <div class="sm">
                    半年售
                    <span>{{ objfood.gsale }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="line"></div>

          <div class="coupon">
            <div>
              <span>平台补贴</span>
              <span>50元优惠券</span>
              <span>【西安】 用户专项福利</span>
            </div>

            <div class="qiang lq">领取</div>
          </div>
          <div class="line"></div>
          <div class="food" @click="funmenu()">
            <div class="oneline">
              <div class="onelinef">推荐菜</div>
              <van-icon name="arrow" />
            </div>
            <p class="shopf">商家招牌菜</p>
            <div class="foodwarp">
              <van-swipe :loop="false" :width="125">
                <van-swipe-item>
                  <img :src="objfood1.img1" alt />
                  <p>{{ objfood1.class11 }}</p>
                </van-swipe-item>
                <van-swipe-item>
                  <img :src="objfood1.img2" alt />
                  <p>{{ objfood1.class12 }}</p>
                </van-swipe-item>
                <van-swipe-item>
                  <img :src="objfood1.img3" alt />
                  <p>{{ objfood1.class21 }}</p>
                </van-swipe-item>
                <van-swipe-item>
                  <img :src="objfood1.img4" alt />
                  <p>{{ objfood1.class22 }}</p>
                </van-swipe-item>
              </van-swipe>
            </div>
            <div class="foodmeal">
              <div class="meal">
                <span class="tname">菜单（0）</span>
                <span class="span">上传首张菜单图片，赢</span>
                <span class="ogr span">10积分</span>
              </div>
              <div class="sc tname">上传</div>
            </div>
            <div class="line"></div>
          </div>
          <div class="assess">
            <div class="oneline">
              <div class="onelinef">评价（402）</div>
              <van-icon name="arrow" @click="fungocomm()" />
            </div>
            <div class="content">
              <div>口味赞（135）</div>
              <div>装修精美（105）</div>
              <div>口服务好（95）</div>
              <div>分量大（42）</div>
              <div>愿意再来（43）</div>
              <div class="cp">上菜慢（23）</div>
              <div>菜质精美（17）</div>
              <div>食材新鲜（16）</div>
              <div>位置好找（16）</div>
            </div>
            <div class="pjcont">
              <div class="left">
                <img src="chenkong/imgs/swipe/1/p1.jpg" alt />
              </div>
              <div class="right">
                <div class="pjname">{{ objpl.tjTitle }}</div>
                <div class="data">发布于9月24日</div>
                <div class="startdf">
                  打分
                  <img class="start" src="chenkong/imgs/shopcenter/start.gif" alt />
                  <img class="start" src="chenkong/imgs/shopcenter/start.gif" alt />
                  <img class="start" src="chenkong/imgs/shopcenter/start.gif" alt />
                  <img class="start" src="chenkong/imgs/shopcenter/start.gif" alt />
                  <img class="start" src="chenkong/imgs/shopcenter/start.gif" alt />
                </div>
                <p class="page">{{ objpl.tjText }}</p>
                <div class="pjpic">
                  <img src="chenkong/imgs/swipe/1/p3.jpg" alt />
                  <img src="chenkong/imgs/swipe/1/p4.jpg" alt />
                </div>
              </div>
            </div>

            <div class="line"></div>
            <div class="us" @click="funus()">
              <div class="oneline">
                <div class="onelinef">问大家（6）</div>
                <van-icon name="arrow" />
              </div>
              <div class="tw">
                <div class="ask">
                  <div class="askle">
                    <span class="ques">问</span>
                    <span class="conask">请问一下人均大概多少钱呀？</span>
                  </div>
                  <span class="askre">9 个回答</span>
                </div>
                <div class="ask">
                  <div class="askle">
                    <span class="ques">问</span>
                    <span class="conask">下午六点去会不会甜品都卖完了呀</span>
                  </div>
                  <span class="askre">5 个回答</span>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="菜品">
          <div class="food">
            <div class="oneline">
              <div class="onelinef">推荐菜</div>
              <van-icon name="arrow" />
            </div>
            <p class="shopf">商家招牌菜</p>
            <div class="foodwarp">
              <van-swipe :loop="false" :width="125">
                <van-swipe-item>
                  <img src="chenkong/imgs/swipe/1/p1.jpg" alt />
                  <p>超满足牛肉杂菌大汉堡</p>
                </van-swipe-item>
                <van-swipe-item>
                  <img src="chenkong/imgs/swipe/1/p3.jpg" alt />
                  <p>精选肥牛寿喜烧</p>
                </van-swipe-item>
                <van-swipe-item>
                  <img src="chenkong/imgs/swipe/1/p2.jpg" alt />
                  <p>低温香煎鸡脯肉</p>
                </van-swipe-item>
                <van-swipe-item>
                  <img src="chenkong/imgs/swipe/1/p4.jpg" alt />
                  <p>杜松罗勒青酱鲜虾</p>
                </van-swipe-item>
              </van-swipe>
            </div>
            <div class="foodmeal">
              <div class="meal">
                <span class="tname">菜单（0）</span>
                <span class="span">上传首张菜单图片，赢</span>
                <span class="ogr span">10积分</span>
              </div>
              <div class="sc tname">上传</div>
            </div>
            <div class="line"></div>
          </div>
          <AssessList />
        </van-tab>
        <van-tab title="评价">
          <AssessList />
        </van-tab>
        <van-tab title="周边"></van-tab>
      </van-tabs>
    </div>
    <AmbitusV />
    <BottomBar />
  </div>
</template>

<script>
import axios from "axios";
import { findstoreByidCK } from "../../../api/chenkong.js";
import { tuijianCK } from "../../../api/chenkong.js";
import { findAllTui } from "../../../api/chenkong.js";
import { findAll } from "../../../api/chenkong.js";

import AssessList from "@/components/chenkong/shoplist/AssessList.vue";
import AmbitusV from "@/components/chenkong/shoplist/AmbitusVew.vue";
import BottomBar from "@/components/chenkong/shoplist/BottomBar.vue";

export default {
  components: { AssessList, AmbitusV, BottomBar },
  data() {
    return {
      obj: [],
      obj1: [],
      objfood: [],
      objfood1: [],

      objpl: [],
      active: "",
      num: 0,
      num1: 0,
      num2: 0,
      numms: 0
    };
  },

  created() {
    let i = this.$route.query.i1;
    this.num = i;
    console.log(i);
    let i1 = this.$route.query.i1;
    this.num1 = i1;
    // console.log(this.num1);

    findstoreByidCK({ tpid: 1 }).then(ok => {
      this.shopById = ok.data.data;
      this.obj = ok.data.data[i1];
      // console.log(ok);
    });
    findAllTui({ storeid: 1 }).then(ok => {
      console.log(ok.data.data[0]);
      this.objfood = ok.data.data[0];
    });
    tuijianCK().then(({ data }) => {
      // console.log(this.obj.tjid);
      if (i1 == 0) {
        this.objpl = data.data[0];
        // console.log(this.objpl);
      } else if (i1 == 1) {
        this.objpl = data.data[6];
        // console.log(this.objpl);
      } else if (i1 == 2) {
        this.objpl = data.data[11];
        // console.log(this.objpl);
      } else if (i1 == 3) {
        this.objpl = data.data[15];
        // console.log(this.objpl);
      }
    });
    findAll().then(data => {
      for (let i = 0; i < data.data.data.length; i++) {
        if (data.data.data[i].tpName == "美食类") {
          this.numms = data.data.data[i].tpid;
          console.log(this.numms);
        }
      }
    });

    // axios.request("http://localhost:8889/shoplistCK").then(({ data }) => {
    //   this.obj = data[i];
    // });
    axios.request("http://localhost:8889/cktc").then(({ data }) => {
      this.objfood1 = data[i];
      // console.log(this.objfood);
    });
  },
  methods: {
    funmenu() {
      this.$router.push({ name: "MenuV", query: { shopid: this.num } });
    },
    funsetmeal() {
      this.$router.push({ name: "SetMeal", query: { shopid: this.num } });
    },
    fungo() {
      this.$router.go(-1);
    },
    funus() {
      this.$router.push("/AskUs");
    },
    fungocomm() {
      this.$router.push("/CommodityPage");
    }
  }
};
</script>
<style >
.van-swipe__indicator {
  display: none;
}
.van-swipe-item {
  width: 34.4vw;
}
</style>
<style lang="scss" scoped>
::v-deep .van-tabs__line {
  height: 1.333vw;
  border-radius: 0%;
  bottom: 6.933vw;
  background-image: linear-gradient(to right, #ed3828, #edac69);
}
.warp {
  margin-top: 5.333vw;
  width: 100%;
  .assess {
    margin-top: 3.733vw;
    line-height: 6.4vw;
    width: 90%;
    margin: auto;
    .oneline {
      margin-top: 3.733vw;

      display: flex;
      justify-content: space-between;
      .onelinef {
        font-size: 3.733vw;
        font-weight: 700;
      }
    }
    .content {
      margin-top: 4.267vw;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      div {
        text-align: center;
        width: 31%;
        color: #fc6841;
        border: 0.267vw solid #fc6841;
        font-size: 2.667vw;
        line-height: 5.333vw;
        margin-bottom: 2.133vw;
        border-radius: 1.333vw;
      }
      .cp {
        border: 0.267vw solid #6683c7;
        color: #6683c7;
      }
    }
    .pjcont {
      display: flex;
      justify-content: space-around;
      padding-bottom: 2.133vw;
      border-bottom: 0.267vw solid #f7f7f7;
    }
    .left {
      img {
        width: 10.667vw;
        border-radius: 50%;
      }
    }
    .right {
      margin-left: 1.6vw;
      font-size: 2.667vw;
      .pjname {
        color: #899396;
      }
      .data {
        color: #999999;
      }
      .startdf {
        img {
          width: 3.733vw;
          vertical-align: middle;
        }
      }
      .page {
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .pjpic {
        margin-top: 2.667vw;
        img {
          width: 26.667vw;
        }
      }
    }
    .line {
      width: 100%;
      height: 2.133vw;
      background: #f6f6f6;
    }
    .tw {
      margin-top: 1.333vw;
      .ask {
        font-size: 3.2vw;
        display: flex;
        justify-content: space-between;
        .ques {
          background: #fc6841;
          padding: 0.533vw;
          color: #f6f6f6;
        }
        .conask {
          padding-left: 2.133vw;
        }
        .askre {
          color: #999999;
        }
      }
    }
  }
  .top {
    width: 95%;
    margin: auto;
    font-size: 3.733vw;
    display: flex;
    justify-content: space-between;
    line-height: 8.8vw;
    height: 8.8vw;

    .icon {
      font-size: 6.4vw;
      padding-left: 1.333vw;
    }
    .icon1 {
      padding-right: 3vw;
    }
  }
  .swipe {
    position: relative;
    width: 90%;
    margin: auto;

    img {
      width: 37.333vw;
      height: 26.667vw;
      border: 0.267vw solid #f7f7f7;
    }
    .ve {
      height: 5.867vw;
      width: 21.067vw;
      position: absolute;
      bottom: 1.867vw;
      right: 0;
    }
  }
  .centent {
    font-size: 2.667vw;
    line-height: 6.933vw;
    width: 95%;
    margin: auto;
    .centent-pic {
      padding: 2.133vw;
      .title {
        font-size: 4.267vw;
        font-weight: bold;
        // color: red;
      }
      .mass {
        .start {
          width: 4.267vw;
          vertical-align: middle;
        }
      }
      .fd {
        display: flex;
        justify-content: space-between;
        border-bottom: 0.267vw solid #f7f7f7;
      }
      .pjad {
        // line-height: 6.933vw;
        padding: 2.667vw 0;
        display: flex;
        border-bottom: 0.267vw solid #f7f7f7;

        .pj {
          width: 13.333vw;
        }
        .adress {
          height: 4.2vw;
          background: #fcede2;
          color: #a48470;
          padding: 0 1.333vw 0 1.333vw;
          line-height: 4.133vw;
        }
      }
      .serve {
        display: flex;
        padding-bottom: 2.133vw;

        border-bottom: 0.267vw solid #f7f7f7;

        span {
          // padding: 0.8vw;
          padding-right: 1.8vw;
          padding-left: 1.8vw;

          margin-right: 1.333vw;

          background: #f5f5f5;
          border-radius: 1.333vw;
        }
      }
      .adress {
        display: flex;
        justify-content: space-between;
        .adressl {
          text-align: center;
          display: flex;
          justify-content: space-between;
          .carl {
            padding-right: 8.8vw;
          }
          img {
            margin-top: 3.333vw;
          }
          .name {
            line-height: 2.667vw;
          }
        }
        p {
          margin-top: 1.333vw;
        }
        .grey {
          color: #919191;
        }
      }

      .orgren {
        color: #dc8261;
        font-weight: bold;
        padding-right: 0.8vw;
      }
    }
  }
  .line {
    width: 100%;
    height: 2.133vw;
    background: #f6f6f6;
  }
  .classify {
    width: 100%;
    .favourable {
      width: 90%;
      margin: auto;
      .content {
        margin-top: 5.333vw;
        font-size: 3.2vw;
        .lineone {
          .hui {
            background: #f16c44;
            color: white;
            padding: 0.8vw;
          }
          .qc {
            font-weight: 400;
          }
        }
        .Presentation {
          margin-top: 2.4vw;
          display: flex;
          justify-content: space-between;
          img {
            width: 15.2vw;
            margin-right: 2.667vw;
          }
          .center {
            line-height: 5.333vw;
            .time {
              font-size: 2.667vw;
              color: #b1b1b1;
            }
            .hua {
              text-decoration: line-through;
              color: #b1b1b1;
              padding: 2.133vw;
            }
            .price {
              .orgin {
                color: #fc562b;
              }
              .bck {
                background: #fbf3f2;
                padding: 0.333vw;
              }
            }
          }
          .left {
            display: flex;
            justify-content: space-around;
          }
          .right {
            margin-top: 2.667vw;

            .sm {
              color: #919191;
            }
          }
        }
      }
    }
    .qiang {
      width: 12vw;
      line-height: 5.867vw;
      text-align: center;
      border-radius: 999em;
      color: #fff;
      background: #f2653c;
      margin-bottom: 2.133vw;
    }
    .coupon {
      width: 90%;
      margin: auto;
      font-size: 3.2vw;
      display: flex;
      justify-content: space-between;
      line-height: 10.667vw;
      .lq {
        height: 5.867vw;
        margin-top: 2.667vw;
      }
    }
    .food {
      width: 90%;
      margin: auto;
      // background: green;
      margin-top: 3.733vw;
      line-height: 6.4vw;
      .oneline {
        display: flex;
        justify-content: space-between;
        .onelinef {
          font-size: 3.733vw;
          font-weight: 700;
        }
      }
      .shopf {
        font-size: 3.2vw;
        font-weight: bold;
      }
      .foodwarp {
        padding-bottom: 1.333vw;

        img {
          width: 32vw;
          height: 24vw;
          border: 0.267vw solid #f7f7f7;
        }
        p {
          text-align: center;

          font-size: 3.2vw;
        }
        border-bottom: 0.267vw solid #f7f7f7;
      }
      .foodmeal {
        // line-height: 11.733vw;
        padding: 2.667vw 0;
        // width: 95%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        .tname {
          font-size: 3.733vw;
          font-weight: 700;
        }
        .ogr {
          color: #f2653c;
        }
        .span {
          font-size: 2.667vw;
          color: #b1b1b1;
        }
        .sc {
          text-align: center;
          width: 14.4vw;
          line-height: 5.867vw;
          border: 0.267vw solid #f16c44;
          border-radius: 999rem;
          color: #f16c44;
        }
      }
    }
  }
}
</style>